/* ******** nav bar ********* */
ul.nav li{
    list-style-type: none;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    transition: transform .4s;
    margin-left: 11%;
}
    

ul.nav li:hover {
        transform: scale(1.3);
    }
    nav {
        overflow: hidden;
        background-color: white;
        width: 100%;
        opacity : 0.9; 
    }
    header li {
    padding-left: 11%; 
    }
    
    .nav a {
        text-decoration: none;
        display: block;
        text-align: center;
        color: black;   
    }
    
    head li a :hover {
        zoom: 1.1%;
    }

/* ******** titre 1 et img pres ************* */

h2.titre1 {
    padding-top: 7%;
    font-family: 'Andada Pro', serif;
    text-align: center;
    color : white;
    font-size: 3em;
    /* 1 em c'est la taille normal, donc 1 em c'est 6 fois plus gros */
    margin-top: 70px;
    text-shadow: 2px 4px 3px black;
    margin-top: -120px;
}
div.imgpres {
    padding-top: 10%;
    background :url(./media/Mauritius\ -\ cascades.jpg) no-repeat 50% 50%;
    background-size: cover;
    height:130px ;}

p#st{
    text-align:justify;
    margin-left: 5%;
    margin-right: 5%;
    font-size: 2em;
    padding: 5%;
    background-color: white;
    border: 1rem solid #0f3958;
}


/* ******************** prestation *********************** */
body {
    background-color: white;
}

div.bleu h4 {
color: white;
text-shadow: 1px 1px 1px black;
}

div.bleu {
    background-color: #0f3958;
}

h3 {
    background-color:#0f3958;
    color: white;
    padding-top: 1%;
    padding-bottom: 1%;
    text-align: center;
    margin-bottom: 0%;
    margin-top: 3%;
}
/* ******** commun a tous les p de la class prix******* */

p.prix {
    background-color:#0f3958;
    color:white;
    margin-left: 0%;
    margin-right: 11%;
    padding-top: 2%;
    padding-bottom: 2%;
}

p.prixdroite {
    background-color:#0f3958;
    color:white;
    margin-left: 11%;
    margin-right: 11%;
    padding-top: 2%;
    padding-bottom: 2%;
}

/* ************ ligne un *******************************/

.ligneun {
    text-align: center;
    background-color:white ;
    padding-top: 6%;
}
.ligneun div {
    display: inline-block;
    width: 500px; 
    vertical-align: top;
}

.ligneun li {
    text-align: justify;
    padding-right: 7%;
}

div.ungauche {
    background-color: white;
    margin-right: 3%;
    margin-top: -10%;
    box-shadow:3px 3px 8px grey;
    font-size: 1.2em;
}

div.undroite {
    background-color: white;
    margin-left: 3%;
    margin-top: -10%;
    box-shadow:3px 3px 8px grey;
    font-size: 1.2em;
}

div.undroite li {
    color:black;
}

div.undroite h4 {
    color: white;
}

/* ******* ligne deux  ************** */
.lignedeux {
    text-align: center;
    padding-top: 6%;
}
.lignedeux div {
    display: inline-block;
    width: 400px;
    height: 300px; 
    padding-right: 2%;
    vertical-align: top;
}



/* ****************** /* Presentiontation (section 2) */

div.img2 {
    padding-top: 10%;
    background :url(./media/bateau.jpg) no-repeat 50% 50%;
    background-size: cover;
    height:90px ;
}
#s2 {
    margin-top: -10%;
}

div.ombre {
    margin-right: 7%;
    margin-left: 7%;
    box-shadow:3px 3px 8px grey;
    margin-top: 14%;
    padding-top: 3%;
    padding-bottom: 3%;
}

p#pimg2 {
    text-align: center;
    margin-left: 65%;
    color: white;
    font-size: 1.3em;
}
#s2 div.deuxgauche {
    display: inline-block;
    width: 500px; 
    padding-right: 2%;
    vertical-align: top;
    margin-top: 6%;
    margin-bottom: 6%;
    box-shadow:3px 3px 8px grey;
    margin-left: 8%;
    background-color: white;
}
#s2 div.deuxdroite {
    display: inline-block;
    width: 500px; 
    padding-right: 2%;
    vertical-align: top;
    margin-top: 6%;
    margin-bottom: 6%;
    margin-left: 7%;
    box-shadow:3px 3px 8px grey;
    background-color: white;
}


#s2 h3 {
    text-align: center;
}

h4.sep {
    background-color: white;
    color: #0f3958;
    text-align: center;
    padding-top: 1%;
    padding-bottom: 1%;
    margin: 0%;
    width: 100%;
}

#s2 p{
    text-align: justify;
}

#s2 div.ombre p {
    text-align: justify;
    margin-left: 10%;
    margin-right: 7%;
    font-size: 1.2em;
}

p.np {
    text-align: justify;
    margin-left: 10%;
    margin-right: 7%;
    font-size: 1.2em;
}

#s2 li {
    text-align: justify;
    margin-left: 15%;
    margin-right: 15%;
    font-size: 1.2em;
}

#s2 h4 {
    color: white;
    text-align: center;
    background-color: #0f3958;
    margin-top: 0;
    margin-right: -6%;
    padding-top: 2%;
    padding-bottom: 2%;
    font-size: 1.3em;
}
p#creole {
    font-size: 1.5em;
    font-style: italic;
    text-align: center;
}

p#souscreole {
    font-size: 0.9em;
    text-align: center;
}

#s2 img {
    float: left;
    margin-left: 7%;
    margin-right: 3%;
    width: 35%;
    box-shadow: 3px 3px 3px grey;
}

p.pres {
    font-size: 1em;
    margin-right: 2%;
    margin-left: 7%;
    
}
/* ********** footer ************ */

div#copyright  {
    margin-top: 5%;
    margin-bottom: 3%;
    }
div#copyright p {
        text-align: center;
    }